<template>
    <div class="app-container">
        <!--搜索面板-->
        <div class="filter-container">
            <el-form :model="searchForm" status-icon ref="searchForm" label-width="80px">
                <el-row :gutter="10">
                    <el-col :sm='6'>
                        <el-form-item label="获取下级" prop="parentPath">
                            <el-cascader
                                v-model = "searchForm.parentPath"
                                placeholder="请输入父级id"
                                :options="areaList"
                                :key = "searchForm.parentPath"
                                :props="{ checkStrictly: true }"
                                filterable
                                @keyup.enter.native="handleFilter"
                                clearable></el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :sm='6'>
                        <el-form-item label="名称" prop="label">
                            <el-input v-model.trim="searchForm.label" placeholder="请输入名称" clearable
                                      @keyup.enter.native="handleFilter"/>
                        </el-form-item>
                    </el-col>
                    <el-col :sm="12">
                        <el-form-item label-width="20px">
                            <el-button v-waves type="success" icon="el-icon-plus" @click="handleEdit()">新增
                            </el-button>
                            <el-button v-waves type="primary" icon="el-icon-search" @click="handleFilter">
                                搜索
                            </el-button>
                            <el-button v-waves icon="el-icon-refresh" @click="handleReset">
                                重置
                            </el-button>
                            <el-button v-waves type="danger" icon="el-icon-delete" @click="handleRemove()">
                                批量删除
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <PageTable class="containtable" :query-method="page" :query-form="searchForm" ref="pageTable">
            <el-table-column label="根" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.rootName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="父级" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.parentName }}</span>
                </template>
            </el-table-column>
<!--            <el-table-column label="路径" align="center">-->
<!--                <template slot-scope="scope">-->
<!--                    <span>{{ scope.row.path }}</span>-->
<!--                </template>-->
<!--            </el-table-column>-->
            <el-table-column label="深度" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.deep }}</span>
                </template>
            </el-table-column>
            <el-table-column label="名称" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.label }}</span>
                </template>
            </el-table-column>
            <el-table-column label="排序" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.seq }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="200px">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑
                    </el-button>
                    <el-button type="danger" size="mini" icon="el-icon-remove" @click="handleRemove(scope.row.id)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </PageTable>
        <!--分页-->

        <!--新增-->
        <el-dialog title="编辑" :visible.sync="editFormShow" :center="true" width="880px" :close-on-click-modal="false">
            <el-form status-icon :rules="rules" :model="editForm" ref="editForm" label-width="120px">
                <el-row>

<!--                    <el-col :sm="12">-->
<!--                        <el-form-item label="根id:" prop="rootId">-->
<!--                            <el-input type="text" v-model.trim="editForm.rootId" placeholder="请输入根id"/>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
                    <el-col :sm="12">
                        <el-form-item label="父级id:" prop="parentId">
                                    <el-cascader
                                        v-model = "editForm.parentPath"
                                        placeholder="请输入父级id"
                                        :options="areaList"
                                        :props="{ checkStrictly: true }"
                                        clearable></el-cascader>
                        </el-form-item>
                    </el-col>
<!--                    <el-col :sm="12">-->
<!--                        <el-form-item label="路径:" prop="path">-->
<!--                            <el-input type="text" v-model.trim="editForm.path" placeholder="请输入路径"/>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
<!--                    <el-col :sm="12">-->
<!--                        <el-form-item label="深度:" prop="deep">-->
<!--                            <el-input type="text" v-model.trim="editForm.deep" placeholder="请输入深度"/>-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
                    <el-col :sm="12">
                        <el-form-item label="名称:" prop="label">
                            <el-input type="text" v-model.trim="editForm.label" placeholder="请输入名称"/>
                        </el-form-item>
                    </el-col>
                    <el-col :sm="12">
                        <el-form-item label="排序:" prop="seq">
                            <el-input-number :min="0" v-model.trim="editForm.seq" placeholder="请输入排序"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer">
                <el-button type="primary" v-waves @click="onSubmit('editForm')" icon="el-icon-success" v-loading="loading">提交</el-button>
                <el-button v-waves @click="onCancel" icon="el-icon-error">取消</el-button>
            </div>
        </el-dialog>
        <!--新增-->
    </div>
</template>

<script>
    import waves from '@/directive/waves'
    import PageTable from "@/components/Pagination/PageTable";
    import {page, detail, edit, remove, areaList} from '@/api/admin/system/area'

    export default {
        name: 'systemSystemArea',
        components: {
            PageTable
        },
        directives: {
            waves
        },
        data() {
            return {
                page,
                loading:false,
                areaList:[],
                searchForm: {
                    phone: '',
                    parentPath:"",
                    label: ''
                },
                rules: {
                    // rootId:  [
                    //     {required: true, message: '请输入根id', trigger: 'blur'}
                    // ],
                    // parentId:  [
                    //     {required: true, message: '请输入父级id', trigger: 'blur'}
                    // ],
                    // path:  [
                    //     {required: true, message: '请输入路径', trigger: 'blur'}
                    // ],
                    // deep:  [
                    //     {required: true, message: '请输入深度', trigger: 'blur'}
                    // ],
                    label:  [
                        {required: true, message: '请输入名称', trigger: 'blur'}
                    ],
                    seq:  [
                        {required: true, message: '请输入排序', trigger: 'blur'}
                    ],
                },
                editFormShow: false,
                editForm: {
                    id: '',
                    rootId: '',
                    parentId: '',
                    path: '',
                    deep: '',
                    label: '',
                    seq: '',
                    parentPath:"",
                },
            }
        },
        methods: {
            gatAreaList(isParentId){
                areaList({isParentId : isParentId}).then(res =>{
                    this.areaList = res.data.areaList
                })
            },
            handleFilter() {
                if (this.searchForm.parentPath !== null && this.searchForm.parentPath !== ''){
                    this.searchForm.parentId = this.searchForm.parentPath.pop()
                  this.searchForm.parentPath.push(this.searchForm.parentId)
                } else {
                    this.searchForm.parentPath = null;
                    this.searchForm.parentId = null;
                }
                this.$refs.pageTable.reset();
            },
            handleReset() {
                this.$refs.searchForm.resetFields();
                this.$refs.pageTable.reset();
            },
            handleEdit(row) {
                this.loading = false;
                this.editFormShow = true;
                this.editForm.parentPath = null;
                this.editForm.id = '';

                this.$nextTick(() => {
                    this.$refs.editForm.clearValidate();
                    this.$refs.editForm.resetFields();
                });
                if (!row) {
                    this.gatAreaList();
                    return;
                }
                this.gatAreaList(row.id);
                detail({id: row.id}).then(res => {
                    this.editForm.id = row.id;
                    Object.entries(res.data.area).forEach(([key, val]) => {
                        if (this.editForm[key] !== undefined) {
                            this.editForm[key] = val;
                        }
                    });
                })
            },
            //提交表单
            onSubmit(editForm) {
                if (this.loading) {
                    return
                }
                this.loading = true;
                this.$refs[editForm].validate((valid) => {
                    if (!valid) {
                        this.loading = false;
                        return false;
                    }
                    if (this.editForm.parentPath !== null || this.searchForm.parentPath !== ''){
                        this.editForm.parentId = this.editForm.parentPath.pop()
                    }
                    edit(this.editForm).then(() => {
                        this.$notify({
                            title: '提示',
                            message: '提交成功',
                            type: 'success'
                        });
                        this.$refs.pageTable.refresh();
                        this.editFormShow = false;
                        this.editForm.parentPath = null;
                        this.gatAreaList();
                    }).finally(() => {
                        this.loading = false;
                    })
                })
            },
            //删除用户
            handleRemove(id) {
                if (!id) {
                    id = this.$refs.pageTable.selects.map(item => item.id).join(',')
                }
                if (!id) {
                    this.$message({
                        type: 'error',
                        message: '请选择要操作的记录!'
                    });
                    return;
                }
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    remove({ids: id}).then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.$refs.pageTable.refresh();
                    })
                });
            },
            // 取消提交
            onCancel: function () {
                this.editFormShow = false;
            }
        },
        mounted() {
            this.gatAreaList();
            this.$refs.pageTable.refresh();
        }
    }
</script>

<style scoped>

</style>

